<template>
	<view class="container">
		<view class="header">
			<text class="header-title">新增地址</text>
		</view>

		<view class="section">
			<view class="form-item">
				<text class="label">收货人</text>
				<input class="input" placeholder="请输入收货人姓名" v-model="name" />
			</view>

			<view class="form-item">
				<text class="label">手机号码</text>
				<input class="input" type="number" placeholder="请输入电话号码" v-model="phone" />
			</view>

			<!-- 城市选择 -->
			<view class="form-item">
				<text class="label">城市</text>
				<picker mode="multiSelector" :range="regionData" :value="cityValue" @change="handleCityChange"
					@columnchange="handleColumnChange">
					<view class="picker-text">{{ cityLabel || '请选择城市' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">详细地址</text>
				<input class="input" placeholder="请输入详细地址" v-model="addressLine1" />
			</view>

			<view class="form-item default-setting">
				<text class="label">设为默认地址</text>
				<switch v-model="isDefault" class="switch"></switch>
			</view>
		</view>

		<button class="save-button" @click="saveAddress">保存地址</button>
	</view>
</template>

<script>
	import {
		data,
	} from "@/api/data.js";
	import {
		insterTAddress,
	} from "@/api/address.js"
	export default {
		data() {
			return {
				name: "",
				phone: "",
				addressLine1: "",
				isDefault: false, // 设置默认地址的状态，默认为false
				cityValue: [0, 0, 0], // 选择的省、市、区索引
				cityLabel: "", // 显示的省市区名称
				regionData: [
					[],
					[],
					[]
				], // 存储省、市、区数据
			};
		},
		methods: {
			// 初始化省市区数据
			initializeRegionData() {
				// 初始化省份
				this.regionData[0] = data.province.map((province) => province.name);

				// 初始化第一个省的城市
				const firstProvinceId = data.province[0].id;
				this.regionData[1] = data.city
					.filter((city) => city.provinceId === firstProvinceId)
					.map((city) => city.name);

				// 初始化第一个城市的区
				const firstCityId = data.city.find((city) => city.provinceId === firstProvinceId).id;
				this.regionData[2] = data.district
					.filter((district) => district.cityId === firstCityId)
					.map((district) => district.name);
			},

			// 处理列改变
			handleColumnChange(event) {
				const {
					column,
					value
				} = event.detail;

				if (column === 0) {
					// 省份列变化，更新城市和地区
					const selectedProvinceId = data.province[value].id;

					// 更新市数据
					this.regionData[1] = data.city
						.filter((city) => city.provinceId === selectedProvinceId)
						.map((city) => city.name);

					// 更新区数据为第一个市的区
					const firstCityId = data.city.find((city) => city.provinceId === selectedProvinceId).id;
					this.regionData[2] = data.district
						.filter((district) => district.cityId === firstCityId)
						.map((district) => district.name);

					// 重置选择的市和区索引
					this.cityValue[1] = 0;
					this.cityValue[2] = 0;
				} else if (column === 1) {
					// 城市列变化，更新区
					const selectedCityId = data.city.find(
						(city) => city.name === this.regionData[1][value]
					).id;

					// 更新区数据
					this.regionData[2] = data.district
						.filter((district) => district.cityId === selectedCityId)
						.map((district) => district.name);

					// 重置选择的区索引
					this.cityValue[2] = 0;
				}
			},

			// 处理选择完成
			handleCityChange(event) {
				const [provinceIndex, cityIndex, districtIndex] = event.detail.value;

				// 获取省、市、区名称
				const province = this.regionData[0][provinceIndex];
				const city = this.regionData[1][cityIndex];
				const district = this.regionData[2][districtIndex];

				this.cityLabel = `${province} ${city} ${district}`;
			},

			// 保存地址
			saveAddress() {
				if (!this.name || !this.phone || !this.addressLine1 || !this.cityLabel) {
					uni.showToast({
						title: "请填写完整信息",
						icon: "none"
					});
					return;
				}
				const defaultValue = this.isDefault ? 1 : 0;
				console.log(this.name + this.phone + this.cityLabel + this.addressLine1);
				console.log("是否默认地址: " + defaultValue); // 根据 isDefault 判断是 0 还是 1
				insterTAddress({
					userId: this.$cookies.get("id"),
					username: this.name,
					userphone: this.phone,
					provinceCityDistrict: this.cityLabel,
					fullAddress: this.addressLine1,
					defaultAddress: defaultValue,
				}).then((res) => {
					if (res.message == "success") {
						uni.showToast({
							title: `地址已保存`,
							icon: "success"
						});
						// 清空输入框和选择器
						this.name = "";
						this.phone = "";
						this.addressLine1 = "";
						this.isDefault = false; 
						this.cityLabel = "";
						this.cityValue = [0, 0, 0];
					} else if (res.message == "地址已存在") {
						uni.showToast({
							title: `地址已存在`,
							icon: "error"
						});
					}
				}).catch((error) => {
					// 错误处理
					uni.showToast({
						title: '更新失败，请稍后重试',
						icon: 'none',
					});
				});
			},
		},
		mounted() {
			this.initializeRegionData();
		},
	};
</script>

<style scoped>
	.container {
		background-color: #f5f6fa;
		height: 100vh;
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: Arial, sans-serif;
	}

	.header {
		background-color: #2ac2d2;
		display: flex;
		align-items: center;
		padding: 15px 20px;
		color: #fff;
		width: 100%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.header-title {
		font-size: 20px;
		font-weight: bold;
	}

	.title {
		font-size: 22px;
		font-weight: bold;
		color: #333;
	}

	.section {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #F0F0F0;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		width: 90px;
		font-size: 16px;
		color: #666;
	}

	.input {
		flex: 1;
		padding: 8px 12px;
		border: 1px solid #D9D9D9;
		border-radius: 4px;
		font-size: 15px;
		color: #333;
		background-color: #FAFAFA;
	}

	.input::placeholder {
		color: #BBBBBB;
	}

	.picker-text {
		flex: 1;
		padding: 8px 12px;
		font-size: 15px;
		color: #333;
		background-color: #FAFAFA;
		border: 1px solid #D9D9D9;
		border-radius: 4px;
	}

	.default-setting {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
	}

	.switch {
		transform: scale(0.9);
	}

	/* 保存按钮 */

	.save-button {
		width: 100%;
		height: 40px;
		margin-top: 20px;
		background-color: #2ac2d2;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 4px;
	}
</style>